<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>题目集列表</title>
    <div th:replace="~{fragments/backend/head-base}"></div>


</head>
<body class="body fixedNav_position fixedMenu_left">
<div class="preloader" style=" position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000;
  backface-visibility: hidden;
  background: #ffffff;">
    <div class="preloader_img" style="width: 200px;
  height: 200px;
  position: absolute;
  left: 48%;
  top: 48%;
  background-position: center;
z-index: 999999">
        <img th:src="@{/img/loader.gif}" style=" width: 50px;" alt="loading...">
    </div>
</div>
<!--wrap-->
<div id="wrap">
    <div th:replace="~{fragments/backend/top :: top}"></div>
    <!-- /#top -->
    <div class="wrapper fixedNav_top">
        <div th:replace="~{fragments/backend/left :: left}"></div>
        <!-- /#left -->
        <div id="content" class="bg-container">
            <header class="head">
                <div class="main-bar">
                    <div class="row no-gutters">
                        <div class="col-6">
                            <h4 class="m-t-5">
                                <i class="fa fa-trophy"></i><span class="ml-1">题目集列表</span>
                            </h4>
                        </div>
                    </div>
                </div>
            </header>
            <div class="outer">
                <div class="inner bg-container">
                    <!--app-->
                    <div id="">
                        <div class="row">
                            <div class="col-12">
                                <div class="float-left w-50">
                                    <div class="input-group">
                                        <input type="search" id="keyword" name="keyword" value=""
                                               placeholder="输入 题目集 进行搜索" class="form-control"/>
                                        <span class="input-group-btn">
                                                    <button class="btn btn-primary" type="button"
                                                            onclick="clickPage(1)">
                                                    <span class="glyphicon glyphicon-search" aria-hidden="true">
                                                    </span><i class="fa fa-search"></i>
                                                    </button>
                                        </span>
                                    </div>
                                </div>
                            </div>


                                <!--competitionList-->
                                <div class="col-12 mt-3">
                                    <table class="table  table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th class="text-center">#</th>
                                            <th class="text-center">创建人</th>
                                            <th class="text-center">题目集</th>
                                            <th class="text-center">开始时间</th>
                                            <th class="text-center">结束时间</th>
                                            <th class="text-center">时长</th>
                                            <th class="text-center">报名人数</th>
                                            <th class="text-center">状态</th>
                                            <th class="text-center">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(competition,index) in competitionList">
                                            <td class="text-center">
                                                {{index + 1 + (pageNum-1) * 10}}
                                            </td>
                                            <td class="text-center">
                                                <a class="primary-hover" target="_blank"
                                                   :href="'/user/mainPage/?userId='+competition.userId">
                                                    {{competition.name}}
                                                </a>
                                            </td>
                                            <td class="text-center">
                                                <a class="text-primary" target="_blank"
                                                   :href="'/competition/competitionDetailPage/?compId='+competition.id">
                                                    {{competition.competitionName}}
                                                </a>
                                            </td>
                                            <td class="text-center">{{competition.startTime | formatDate}}</td>
                                            <td class="text-center">{{competition.endTime | formatDate}}</td>
                                            <td class="text-center">{{competition.startTime |
                                                differDate(competition.endTime)}}
                                            </td>
                                            <td class="text-center">{{competition.registerCount}}</td>
                                            <td class="text-center">{{competition.startTime |
                                                competitionStatus(competition.endTime)}}
                                            </td>
                                            <td class="text-center">
                                                <a class="btn btn-sm btn-primary"
                                                   :href="'/backend/competition/competitionEditPage?compId='+competition.id">编辑
                                                </a>
                                                <a @click="deleteCompetition(competition.id)">
                                                    <button class="btn btn-sm btn-danger">删除</button>
                                                </a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <!--page-->
                                    <div class="row mt-3">
                                        <div style="margin: 0 auto">
                                            <ul class="page" maxshowpageitem="5" pagelistcount="10" id="page"></ul>
                                        </div>
                                    </div>
                                    <!--#page-->
                                </div>
                                <!--#competitionList-->
                            </div>
                        </div>
                        <!--#app-->
                    </div>
                </div>
            </div>
            <!-- /.inner -->
        </div>
        <!-- /.outer -->
        <!-- /#content -->
        <!-- Modal -->
        <!-- # right side -->
    </div>
    <!-- /#wrap -->
    <!-- global scripts-->
    <div th:replace="~{fragments/backend/footer :: footer}"></div>
    <!--end of global scripts-->
    <!--  plugin scripts -->
    <!--end of plugin scripts-->
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/

        // vue
        var wrap = new Vue({
            el: '#wrap',
            data: {
                total: 0,
                pageNum: 1,
                competition: {},
                competitionList: []
            },
            filters: {
                formatDate: function (val) {
                    var value = new Date(val);
                    var year = value.getFullYear();
                    var month = padDate(value.getMonth() + 1);
                    var day = padDate(value.getDate());
                    var hour = padDate(value.getHours());
                    var minutes = padDate(value.getMinutes());
                    var seconds = padDate(value.getSeconds());
                    return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
                },
                formatYear: function (val) {
                    var value = new Date(val);
                    var year = value.getFullYear();
                    return year;
                }, differDate: function (date1, date2) {
                    return differDate2HourMinute(date1, date2);
                },
                formatNum: function (val) {
                    //四舍五入
                    return  parseFloat(val).toFixed(2);
                }, competitionStatus: function (startTime, endTime) {
                    var result;
                    var start = new Date(startTime);
                    var end = new Date(endTime);
                    var now = new Date();
                    if (now.getTime() - start.getTime() < 0) {
                        result = "未开始";
                    } else if (now.getTime() - start.getTime() >= 0 && now.getTime() - end.getTime() <= 0) {
                        result = "进行中";
                    } else if (now.getTime() - end.getTime() > 0) {
                        result = "已结束";
                    }
                    return result;
                }
            },
            methods: {
                listCompetition: function (pageNum) {
                    var keyword = $("#keyword").val();
                    var url = '/backend/competition/list2Page';
                    this.$http.post(url, {
                        "pageNum": pageNum,
                        "keyword": keyword
                    }, {emulateJSON: true}).then(function (res) {
                        this.total = res.data.data.total;
                        this.competitionList = res.data.data.list;
                        $("#page").initPage(this.total, pageNum, clickPage);
                    }), function (res) {
                        console.log(res.data.msg);
                    }
                }
            }
        });
        //初始化
        wrap.listCompetition(1);

        //分页点击方法
        function clickPage(pageNum) {
            wrap.listCompetition(pageNum);
        }

        function deleteCompetition(competitionId) {
            swal({
                title: '确认删除该题目集?',
                // text: '提醒',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#EF6F6C',
                cancelButtonColor: '#4fb7fe',
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(function () {
                $.post("/backend/competition/delete", {"compId": competitionId}, function (resp) {
                    if (resp.status == 200) {
                        $.message({
                            message: resp.msg,
                            type: 'success'
                        });
                        clickPage(1);
                    } else {
                        $.message({
                            message: resp.msg,
                            type: 'error'
                        });
                    }
                })
            }).catch(function(reason) {
                return false;
            });
        }

        // end of vue


        //select2


        /*]]>*/
    </script>

</body>

</html>
